<template>
	<view class="bg">
		<u-navbar :is-back="true" title="取消" title-color="white" :background="background">
		</u-navbar>
		<view class="u-padding-left-26 u-p-r-26 u-margin-top-20 u-m-b-20 block">
			<view class="liP">
				<p>取消原因<text style="float: right;" v-model="showInfo" @click="showInfo = true">{{showValue}}</text></p>
				<u-select v-model="showInfo" :list="showInfoList" @confirm="select"></u-select>
				<p>原因描述（选填)<text style="float: right;">喝奶</text>
					<u-input v-model="value" placeholder="请输入描述和证据信息" :type="type" :maxlength="100" :clearable="false"
						:border="border" />
				</p>
			</view>
		</view>
		<u-button type="primary" style="width: 90%;position: fixed;bottom: 60rpx;left: 5%;" @click="cancel()">取消
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#00a8ff'
				},
				// 文本框信息
				value: '',
				type: 'textarea',
				border: true,
				id:'',
				// 初始信息
				showValue: '现在在忙，不方便咨询',
				// 取消原因
				showInfo: false,
				showInfoList: [{
						value: '1',
						label: '现在在忙，不方便咨询'
					},
					{
						value: '2',
						label: '现在在忙'
					}
				],
			}
		},
		onLoad(e) {
			console.log(e);
			this.id=e.id;
		},
		methods: {

			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素
			select(selectValue) {
				console.log(selectValue[0].label);
				this.showValue = selectValue[0].label;
			},
			
			cancel(){
				console.log("取消操作");
				this.$apiVipCentre.cancel({
					id: this.id
				}).then((res) => {
					console.log('request success', res);
					console.log(res.data.data)
					
					uni.showToast({
						title:res.data.msg
					})
				
				}).catch((err) => {
					console.log('request fail', err);
				})
				
			},

			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>

<style scoped>
	.bg {
		background-color: #f3f4f5;
	}

	.viewImg image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.liP p {
		line-height: 80rpx;
		border-bottom: #e5e5e5 1px solid;
	}

	.liP p:last-child {
		border-bottom: none;
	}

	.block {
		background-color: #FFFFFF;
	}
</style>
